<template>
  <!-- 动态水球 -->
  <div class="shuiqiufill">
    <div :style="{width:width +'%', height:height +'px'}" :ref="liquilRef"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import echartsLiquidfill from "echarts-liquidfill";
export default {
  name: "shuiqiufill",
  props: {
    seriesData: {
      type: String,
      default:'{value=0}'
    },
    borderColor: {
      type: String,
      default: ""
    },
    title: {
      type: Array,
      default() {
        return [];
      }
    },
    width: {
      type: Number,
      default: 90
    },
    height: {
      type: Number,
      default: 180
    }
  },
  data() {
  return {
      liquilRef: "echarts-"+new Date().getTime()
  }
  },
  watch: {
    seriesData: {
      handler(newVal) {
        newVal && (newVal  = JSON.parse(newVal))
          this.$nextTick(()=>{
            this.drawChart(newVal)
          })
      },
      deep: true
    }
  },
  methods: {
    drawChart(newVal) {
      const vm = this;
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(this.$refs[this.liquilRef]);
      console.log(newVal,"newVal")
      // 绘制图表
      myChart.setOption({
        title: this.title,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        series: [
          {
            type: "liquidFill",
            radius: "95%",
            waveAnimation: true,
            data: newVal,
            // [{
            //   value: .5,  //数据展示
            //   direction: 'left',
            //   itemStyle: {
            //     normal: {
            //       color: '#a7d7fb'
            //     }
            //   }
            // }],
            outline: {
              // show: true , //是否显示轮廓 布尔值
              borderDistance: 1, // 外部轮廓与图表的距离 数字
              itemStyle: {
                borderColor: this.borderColor, // 边框的颜色
                borderWidth: 3, // 边框的宽度
                // shadowBlur: 5 , //外部轮廓的阴影范围 一旦设置了内外都有阴影
                shadowColor: "transparent" //外部轮廓的阴影颜色
              }
            },
            itemStyle: {
              opacity: 0.9, // 波浪的透明度
              shadowBlur: 0 // 波浪的阴影范围
            },
            backgroundStyle: {
              color: "#fff" // 图表的背景颜色
            },
            label: {
              // 数据展示样式
              show: true,
              color: "#333",
              insideColor: "#fff",
              fontSize: 14,
              fontWeight: 400,
              align: "center",
              baseline: "middle",
              position: "inside"
            }
          }
        ]
      },true);
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
